<template>
  <div>
    <form action="/">
      <van-search
        v-model="estate"
        show-action
        placeholder="请输入搜索关键词"
        @search="onSearch"
        @cancel="$router.back()"
      />
      <ul class="search-tips">
        <li class="search-tip" v-for="item in estateList" :key="item.community" @click="communityFn(item.community,item.communityName)">{{item.communityName}}</li>
      </ul>
    </form>
  </div>
</template>

<script>
import request from '@/utils/request'
export default {
  name: 'HaokezfEstate',

  data () {
    return {
      estate: '',
      estateList: []
    }
  },

  mounted () {},

  methods: {
    async onSearch (val) {
      const cityId = this.$store.state.cityId
      const { body } = await request({
        url: '/area/community',
        params: {
          name: val,
          id: cityId
        }
      })
      this.estateList = body
    },
    communityFn (id, name) {
      this.$router.push({
        path: '/houseRelease',
        query: {
          estateId: id,
          estateName: name
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.search-tips {
  width: 100%;
  padding: 0 10px 10px;
  .search-tip {
    width: 100%;
    height: 50px;
    border-bottom: 1px solid #f1f1f1;
    line-height: 50px;
    font-size: 14px;
    &:last-child {
      border: none;
    }
  }
}
</style>
